import React, {PureComponent} from 'react';
import './Demo.css'

class Parent extends PureComponent {
    state = {carName: "奔驰c36", stus: ['小张', '小李', '小王']}

    addStu = () => {
        // const {stus} = this.state
        // stus.unshift('小刘')
        // this.setState({stus: stus})

        const {stus} = this.state
        this.setState({stus: ['小刘', ...stus]})
    }

    changeCar = () => {
        // this.setState({carName: "迈巴赫"})

        const obj = this.state
        obj.carName = '迈巴赫'
        console.log(obj === this.state)
        this.setState(obj)
    }

    // shouldComponentUpdate(nextProps, nextState, nextContext) {
    //     console.log(this.props, this.state, 'Parent')
    //     console.log(nextProps, nextState, 'Parent')
    //     return !this.state.carName === nextState.carName
    // }

    render() {
        console.log('Parent--render')
        const {carName} = this.state
        return (
            <div className="parent">
                <h3>我是Parent组件</h3>
                {this.state.stus}&nbsp;
                <span>我的车名字是：{carName}</span><br></br>
                <button onClick={this.changeCar}>点我换车</button>
                <button onClick={this.addStu}>添加一个小刘</button>
                <Child carName="奥拓"></Child>
            </div>
        );
    }
}

class Child extends PureComponent {
    // shouldComponentUpdate(nextProps, nextState, nextContext) {
    //     console.log(this.props, this.state, 'Child')
    //     console.log(nextState, nextState, 'Child')
    //     return !this.props.carName === nextState.carName
    // }

    render() {
        console.log('Child--render')
        return (
            <div className="child">
                <h3>我是Child组件</h3>
                <span>我接到的车是：{this.props.carName}</span>
            </div>
        );
    }
}

export default Parent;